<template>
  <div>
    <el-card
      class="container2"
      v-for="(item, index) in articleItems"
      :key="index"
    >
      <div>
        <el-tag type="danger">{{ item.type }}</el-tag>
        <el-tag class="left">{{ item.classifyName }}</el-tag>
        <span class="left" style="font-size: 12px">7天前发表</span>
        <span class="left" style="font-size: 12px">1天前更新</span>
        <span class="left" style="font-size: 12px; white-space: nowrap"
          >{{ item.readTime }}分钟读完, (大约{{ item.words }}个字)</span
        >
      </div>
      <article>
        <h1 @click="toArticle(item.articleId)">{{ item.title }}</h1>
        <div class="content">
          <p>{{ item.summary }}</p>
        </div>
      </article>
      <button class="btn" style="margin-top: 20px" @click="toArticle(item.articleId)">阅读更多</button>
    </el-card>
    <div
      class="hidden-sm-and-down"
      style="display: flex; justify-content: center"
    >
      <el-pagination
        background
        layout="prev, pager, next"
        :total="totalSize "
        class="hidden-sm-and-down"
      ></el-pagination>
    </div>
    <button class="button hidden-md-and-up" v-if="curPage === 1" style="">
      下一页
    </button>
    <div
      v-if="curPage > 1 && curPage < totalSize"
      style="display: flex; justify-content: space-between"
    >
      <button class="button hidden-md-and-up" style="width: 49%">上一页</button>
      <button class="button hidden-md-and-up" style="width: 49%">下一页</button>
    </div>
    <button
      class="button hidden-md-and-up"
      v-if="curPage === totalSize"
      style=""
    >
      上一页
    </button>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      curPage: 1,
      totalSize: 4,
      articleItems: [
        
      ],
    };
  },
  methods: {
      toArticle(articleId) {
          window.scrollTo(0, 0)
		  this.$articleLoading = true
          this.$router.push({ name: 'article', params: { articleId } })
      },

      async getArticleList(page, size) {
        let param = {
          "page": page,
          "size": size
        }

        let res = await this.$http.post('/article/list', param)
        let sizeData = await this.$http.get("/article/size")
        if (sizeData.statusCode == 200) {
          this.totalSize = sizeData.data.size
        }
        if(res.statusCode == 200) {
          this.articleItems = res.data
        } else {

        }
      }
  },
  mounted() {
    this.getArticleList(1, 2)
  }
};
</script>
<style scoped>
.container2 {
  min-width: 12em;
  margin-bottom: 1.5em;
}
.left {
  margin-left: 1.2em;
}
.content {
  word-wrap: break-word;
  word-break: normal;
}
.btn {
  display: inline;
  height: 30px;
  width: 80px;
  text-align: center;
  line-height: 30px;
  border-radius: 4px;
  font-size: 13px;
  background-color: rgb(245, 245, 245);
  border: none;
}
.btn:hover {
  background-color: rgb(238, 238, 238);
}
</style>
